<template>
	<u-popup ref="popupShow" mode="center" border-radius="24" close-icon-pos="top-right" :mask-close-able="false" z-index="1075">
		<view class="popping-share">
			<view class="imageClose">
				<image src="../static/关闭.png" @click="closeWindow"></image>
			</view>
			<view class="title">
				邀请好友赚积分
			</view>
			<view class="concent">
				分享到微信工友群/朋友圈/qq群,工友点击您分享的链接来到鱼泡网每成功注册一个,您可获得2~18正式积分(多邀多得,无上限,可叠加!)
			</view>
			<view class="foot">
				<view class="right"></view>
				<view class="concent">
					分享到
				</view>
				<view class="left"></view>
			</view>
			<view class="give">
				<view @click="shareWeChat" class="weixin">
					<image src="../static/微信.png" mode=""></image>
					微信
				</view>
				<view class="friend">
					<image src="../static/朋友圈.png" mode=""></image>
					朋友圈
				</view>
				<view class="qq">
					<image src="../static/qq.png" mode=""></image>
					QQ
				</view>
				<view class="space">
					<image src="../static/QQ空间.png" mode=""></image>
					QQ空间
				</view>
			</view>
		</view>
	</u-popup>
</template>

<script>
	export default {
		props: {
			show: {
				type: Boolean,
				default: true
			}
		},
		data() {
			return {
				isShow: this.show
			}
		},

		methods: {
			closeWindow() {
				this.$refs.popupShow.close()
			},
			shareWeChat() {
				uni.share({
					provider: "weixin",
					scene: "WXSceneSession",
					type: 0,
					href: "http://uniapp.dcloud.io/", //这里写打开app的urlschemes
					title: "uni-app分享",
					summary: "我正在使用HBuilderX开发uni-app，赶紧跟我一起来体验！",
					imageUrl: "https://img-cdn-qiniu.dcloud.net.cn/uniapp/images/uni@2x.png",
					success: function(res) {
						console.log("success:" + JSON.stringify(res));
					},
					fail: function(err) {
						console.log("fail:" + JSON.stringify(err));
					}
				})
			}
		},
	}
</script>

<style lang="scss" scoped>
	.popping-share {
		height: 62vh;
		width: 90vw;
		background: #FFFFFF;
		display: flex;
		flex-direction: column;
		position: relative;

		.imageClose {
			position: absolute;
			top: 10rpx;
			right: 10rpx;

			image {
				height: 60rpx;
				width: 60rpx;
			}
		}

		.title {
			background: #007AFF;
			color: #FFFFFF;
			font-weight: bold;
			font-size: 60rpx;
			padding: 60rpx 30rpx;
			text-align: center;
			letter-spacing: 20rpx
		}

		.concent {
			font-size: 36rpx;
			padding: 30rpx 30rpx;
		}

		.foot {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 0 30rpx;
			color: #007AFF;
			font-weight: bold;

			.right {
				width: 220rpx;
				border: solid 1px #cdced0;
			}

			.left {
				width: 220rpx;
				border: solid 1px #cdced0;
			}
		}

		.give {
			display: flex;
			align-items: center;
			justify-content: space-around;
			padding: 30rpx;

			image {
				height: 80rpx;
				width: 80rpx;
			}

			.weixin,
			.qq,
			.friend,
			.space {
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
			}
		}
	}
</style>
